<template>
  <div class="wrapper">
    <CNLocale :words="locales.cn">
      <Gantt
        :borders="borders"
        :cellHeight="cellHeight"
        :readonly="{ noEdit: true }"
				:grid='220'
        :tasks="data.tasks"
        :links="data.links"
        :scales="data.scales"
        :columns="data.columns"
        :start="new Date(2023, 2, 1)"
        @action="ganttAction"
        @store="store = $event"
      />

      <Form v-if="task" :task="task" @action="formAction" />
    </CNLocale>
  </div>
</template>

<script>
import Gantt from "../assets/trial-vue-gantt";
import Form from "./Form.vue";
import { getData } from "../common/data";
import { wx, locales } from "../assets/trial-vue-gantt";
const { CNLocale } = wx;

export default {
  components: {
    Gantt,
    Form,
		CNLocale
  },

  props: ["borders", "cellHeight"],

  data: () => ({
    data: getData(),
    task: null,
    store: null,
		locales
  }),

  methods: {
    ganttAction(e) {
      const { id, nId, action } = e;

      switch (action) {
        case "show-details":
          this.task = this.store.getTask(id);
          break;

        case "add-task":
          this.task = this.store.getTask(nId);
          break;

        default:
          break;
      }
    },

    formAction(e) {
      switch (e.action) {
        case "hide-details":
          this.task = null;
          break;

        default:
          break;
      }

      this.store.action(e.id, e.action, e.obj);
    },
  },
};
</script>

<style scoped>
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
